{% extends 'base.html' %}
{% block title %}分类管理{% endblock %}

{% block content %}
<div class="container mt-4" style="max-width: 600px;">
  <h2 class="mb-4">分类管理</h2>

  <!-- 添加分类表单 -->
  <form method="post" class="mb-4">
    {% csrf_token %}
    <div class="input-group">
      <input type="text" name="name" class="form-control" placeholder="请输入新分类名..." required>
      <button class="btn btn-primary" type="submit">➕ 添加</button>
    </div>
  </form>

  <!-- 分类列表 -->
  <ul class="list-group shadow-sm rounded">
    {% for category in categories %}
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>{{ category.name }}</span>
        <div class="btn-group btn-group-sm">
          <!-- 编辑按钮 -->
          <button type="button"
                  class="btn btn-outline-secondary"
                  data-bs-toggle="modal"
                  data-bs-target="#editModal"
                  data-category-id="{{ category.id }}"
                  data-category-name="{{ category.name }}">
            ✏️ 编辑
          </button>
          <!-- 删除按钮 -->
          <button type="button"
                  class="btn btn-outline-danger"
                  data-bs-toggle="modal"
                  data-bs-target="#deleteModal"
                  data-category-id="{{ category.id }}"
                  data-category-name="{{ category.name }}">
            🗑 删除
          </button>
        </div>
      </li>
    {% empty %}
      <li class="list-group-item text-muted">暂无分类</li>
    {% endfor %}
  </ul>
</div>

<!-- 删除分类 Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="post" id="deleteForm">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteModalLabel">确认删除分类</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          确认删除分类：<strong id="modalDeleteCategoryName" class="text-danger"></strong> 吗？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-danger">确认删除</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 编辑分类 Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="post" id="editForm">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editModalLabel">编辑分类</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <input type="text" name="new_name" id="editCategoryInput" class="form-control" required>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存修改</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // 删除 Modal 填充数据
  var deleteModal = document.getElementById('deleteModal');
  deleteModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var categoryId = button.getAttribute('data-category-id');
    var categoryName = button.getAttribute('data-category-name');
    document.getElementById('modalDeleteCategoryName').textContent = categoryName;
    document.getElementById('deleteForm').action = "{% url 'delete_category' 0 %}".replace('0', categoryId);
  });

  // 编辑 Modal 填充数据
  var editModal = document.getElementById('editModal');
  editModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var categoryId = button.getAttribute('data-category-id');
    var categoryName = button.getAttribute('data-category-name');
    document.getElementById('editCategoryInput').value = categoryName;
    document.getElementById('editForm').action = "{% url 'edit_category' 0 %}".replace('0', categoryId);
  });
</script>
{% endblock %}
